<template>
	<view class="add-coupon">
		<view class="add-coupon-tab">
			<view v-for="(data,index) in couponType" :key="index" :class="{active: couponIndex==index}" @click="choseType(index)">{{data}}</view>
		</view>
		<view class="add-coupon-form">
			<view  v-if="couponIndex==0" class="discount">
				<view class="add-coupon-form-cell">
					<view class="cell-label">优惠券名称</view>
					<input type="text" placeholder="请输入" v-model="discountForm.coupon_name" placeholder-style="color: #B3B3B3"/>
				</view>
				<view class="add-coupon-form-cell">
					<view class="cell-label">折扣</view>
					<view class="cell-picker" :class="{active: discountForm.discount}">
						<picker @change="discountChange" :value="discountValue" :range="discountList" range-key="label">
							{{discountForm.discount?discountForm.discount+'折':'折扣'}}
							<image src="https://master.shengejiaju.cn/web/static/icons/ico_more_home@2x.png"></image>
						</picker>
					</view>
				</view>
				<view class="add-coupon-form-cell">
					<view class="cell-label">过期时间</view>
					<view class="cell-picker" :class="{active: discount_stop_time}">
						<picker @change="timeChange($event,0)" mode="date" :start="$timeFormat(new Date(),'yyyy-mm-dd')">
							{{discount_stop_time?discount_stop_time:'过期时间'}}
							<image src="https://master.shengejiaju.cn/web/static/icons/ico_more_home@2x.png"></image>
						</picker>
					</view>
				</view>
			</view>
			<view  v-if="couponIndex==1" class="reduction">
				<view class="add-coupon-form-cell">
					<view class="cell-label">优惠券名称</view>
					<input type="text" placeholder="请输入" v-model="reductionForm.coupon_name" placeholder-style="color: #B3B3B3"/>
				</view>
				<view class="add-coupon-form-cell">
					<view class="cell-label">优惠金额</view>
					<input type="text" placeholder="请输入" v-model="reductionForm.money" placeholder-style="color: #B3B3B3"/>
				</view>
				<view class="add-coupon-form-cell">
					<view class="cell-label">需满金额(元)</view>
					<input type="text" placeholder="请输入" v-model="reductionForm.satisfy_money" placeholder-style="color: #B3B3B3"/>
				</view>
				<view class="add-coupon-form-cell">
					<view class="cell-label">过期时间</view>
					<view class="cell-picker" :class="{active: reduction_stop_time}">
						<picker @change="timeChange($event,1)" mode="date" :start="$timeFormat(new Date(),'yyyy-mm-dd')">
							{{reduction_stop_time?reduction_stop_time:'过期时间'}}
							<image src="https://master.shengejiaju.cn/web/static/icons/ico_more_home@2x.png"></image>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view class="coupon-btn"><view class="btn" @click="$throttle(addCoupon,2000)">确定添加</view></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				couponIndex: 0,
				couponType: ['折扣优惠券','满减优惠券'],
				discountList: [{
					label: '9.5折',
					value: 9.5
				},{
					label: '9折',
					value: 9
				},{
					label: '8.5折',
					value: 8.5
				},{
					label: '8折',
					value: 8
				},{
					label: '7.5折',
					value: 7.5
				},{
					label: '7折',
					value: 7
				},{
					label: '6.5折',
					value: 6.5
				},{
					label: '6折',
					value: 6
				},{
					label: '5.5折',
					value: 5.5
				}],
				discountValue: 0,
				discount_stop_time: '',
				discountForm: {
					type: 2,
					coupon_name: '',
					discount: '',
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
					stop_time: '',
				},
				reduction_stop_time: '',
				reductionForm: {
					type: 1,
					coupon_name: '',
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
					stop_time: '',
					money: '',
					satisfy_money: ''
				}
			}
		},
		onLoad() {
			
		},
		methods: {
			choseType(index){
				this.couponIndex = index
			},
			discountChange(e){
				this.discountForm.discount = this.discountList[e.detail.value].value
			},
			timeChange(e,index){
				if(index==0){
					this.discount_stop_time = e.detail.value
					this.discountForm.stop_time = Date.parse(new Date(e.detail.value)) / 1000
				}else if(index==1){
					this.reduction_stop_time = e.detail.value
					this.reductionForm.stop_time = Date.parse(new Date(e.detail.value)) / 1000
				}
			},
			addCoupon(){
				switch (this.couponIndex){
					case 0:
						this.$api.CouponAdd(this.discountForm).then(res => {
							uni.showModal({
								title: '温馨提示',
								content: '添加成功，是否继续添加',
								cancelText: '否',
								confirmText: '是',
								success: (confirm) => {
									if(confirm.cancel){
										uni.navigateBack()
									}else if(confirm.confirm){
										this.discountValue = 0
										this.discount_stop_time = ''
										this.discountForm = {
											type: 2,
											coupon_name: '',
											discount: '',
											store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
											stop_time: ''
										},
										this.reduction_stop_time = ''
										this.reductionForm = {
											type: 1,
											coupon_name: '',
											store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
											stop_time: '',
											money: '',
											satisfy_money: ''
										}
									}
								}
							})
						}).then(() => {
							this.AddFoot('商家-优惠券-添加-完成')
						})
						break;
					case 1:
						this.$api.CouponAdd(this.reductionForm).then(res => {
							uni.showModal({
								title: '温馨提示',
								content: '添加成功，是否继续添加',
								cancelText: '否',
								confirmText: '是',
								success: (confirm) => {
									if(confirm.cancel){
										uni.navigateBack()
									}else if(confirm.confirm){
										this.discountValue = 0
										this.discount_stop_time = ''
										this.discountForm = {
											type: 2,
											coupon_name: '',
											discount: '',
											store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
											stop_time: ''
										},
										this.reduction_stop_time = ''
										this.reductionForm = {
											type: 1,
											coupon_name: '',
											store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
											stop_time: '',
											money: '',
											satisfy_money: ''
										}
									}
								}
							})
						}).then(() => {
							this.AddFoot('商家-优惠券-添加-完成')
						})
						break;
				}
			},
			AddFoot(where){
				this.$api.AddFoot({
					// #ifdef MP
					type: 1,
					// #endif
					//#ifdef APP-PLUS
					type: 2,
					// #endif
					//#ifdef H5
					type: 3,
					// #endif
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
					client: 2,
					where: where,
					stay_time: 0,
					goods_id: 0,
					store_goods_id: 0
				})
			}
		}
	}
</script>

<style lang="scss">
	.add-coupon{
		padding: 120rpx 0;
		.add-coupon-tab{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			height: 120rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #FFF;
			view{
				width: 220rpx;
				height: 62rpx;
				line-height: 58rpx;
				text-align: center;
				font-size: 28rpx;
				color: #757575;
				border: solid 2rpx #F2F2F2;
				&:first-child{
					border-radius: 4rpx 0 0 4rpx;
				}
				&:last-child{
					border-radius: 0 4rpx 4rpx 0;
				}
				&.active{
					background-color: #2073F5;
					color: #FFF;
					border-color: #2073F5;
				}
			}
		}
		.add-coupon-form{
			padding: 30rpx;
			.add-coupon-form-cell{
				margin-bottom: 30rpx;
				background-color: #FFF;
				display: flex;
				justify-content: space-between;
				border-radius: 8rpx;
				padding: 30rpx;
				&:last-child{
					margin-bottom: 0;
				}
				input{
					text-align: right;
				}
				.cell-label{
					color: #333;
					font-size: 32rpx;
				}
				.cell-picker{
					flex: 1;
					min-width: 0;
					text-align: right;
					color: #B3B3B3;
					&.active{
						color: #333;
					}
					image{
						width: 16rpx;
						height: 26rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
		.coupon-btn{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #FFF;
			padding: 15rpx 75rpx 0;
			height: 120rpx;
			.btn{
				display: block;
				height: 90rpx;
				background-color: #2073F5;
				font-size: 32rpx;
				color: #FFF;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>
